<template>
  <div>
    <el-form label-width="auto">
      <el-form-item label="SPU名称">
        <el-input placeholder="请输入SPU名称" type="textarea" v-model="SpuParams.spuName" />
      </el-form-item>
      <el-form-item label="SPU品牌">
        <el-select placeholder="请选择品牌" style="width: 30%" v-model="SpuParams.tmId">
          <el-option v-for="(item, index) in tradeMarkList" :key="item.id" :label="item.tmName" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU名称">
        <el-input placeholder="请输入描述" type="textarea" v-model="SpuParams.description" />
      </el-form-item>
      <el-form-item label="SPU名称">
        <el-upload
          v-model:file-list="imgList"
          action="/api/admin/product/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :before-upload="handlerUpload"
        >
          <el-icon>
            <Plus />
          </el-icon>
          <el-dialog v-model="dialogVisible">
            <img
              w-full
              :src="dialogImageUrl"
              alt="Preview Image"
              style="width: 100%; height: 100%"
            />
          </el-dialog>
        </el-upload>
      </el-form-item>
      <el-form-item label="SPU销售属性">
        <el-select
          :placeholder="unSelectSaleAttr.length?`还未选择${unSelectSaleAttr.length}个`:`无`"
          style="width: 30%; margin-right: 10px"
          v-model="saleAttrIdAndValueName"
        >
          <el-option v-for="item in unSelectSaleAttr" :key="item.id" :value="item.name" />
        </el-select>
        <el-button
          type="primary"
          icon="Plus"
          title="添加销售属性"
          :disabled="!saleAttrIdAndValueName"
          @click="addSaleAttr"
          >添加属性值</el-button
        >
        <el-table style="width: 100%; width: 100%; margin: 10px 0px" border :data="saleAttr">
          <el-table-column label="序号" width="80px" align="center" type="index" />
          <el-table-column label="销售属性名" align="" width="120px" prop="saleAttrName">
          </el-table-column>
          <el-table-column label="属性值" align="">
            <template #="{ row }">
              <el-tag
                v-for="(item, index) in row.spuSaleAttrValueList"
                :key="row.id"
                style="margin: 5px"
                closable
                @close="handleClose(row.spuSaleAttrValueList,index)"
              >
                {{ item.saleAttrValueName }}
              </el-tag>
              <div v-if="row.flag">
                <el-input
                  placeholder="请输入属性值"
                  size="small"
                  style="width: 50%; margin-right: 10px"
                  v-model="row.saleAttrValue"
                >
                </el-input>
                <ElButton type="primary" @click="toLook(row)" size="small">保存属性</ElButton>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="" width="120px">
            <template #="{ row,$index }">
              <el-button
                type="primary"
                icon="plus"
                size="small"
                title="添加SPU销售属性的属性值列表"
                @click="addsaleAttrValueName(row)"
              ></el-button>
              <el-button type="primary" icon="delete" size="small" title="删除SPU列表" @click="delSaleAttr($index)"</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" title="保存" @click="save" :disabled="!SpuParams.spuName">保存</el-button>
        <el-button type="primary" title="取消" @click="cancal">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="SPUFORM">
import {
  reqHasTrademarkList,
  reqHasSpuImageList,
  reqHasExistingSpuSaleAttrList,
  reqHasAllSaleAttrList,
  reqUpDataSpu,
  reqAddSpu
} from '@/API/product/spu'
import {
  TrademarkListData,
  SpuRecordData,
  ImageList,
  BaseSaleAtrrListData,
  SaleAttrData,
  SaleAttrValueList,
  SaleAttr
} from '@/API/product/spu/type'
import useSpuStore from '@/store/modules/useSpu'
import { computed, onMounted, ref } from 'vue'
import { ElMessage, inputEmits, resultProps } from 'element-plus'
let $emit = defineEmits(['changUpDataHasSpu'])
let SpuStore = useSpuStore()
let tradeMarkList = ref<TrademarkListData>([])
let imgList = ref<ImageList>([])
let saleAttr = ref<SaleAttrData>([])
let allSaleAttr = ref<BaseSaleAtrrListData>([])
let SpuParams = ref<SpuRecordData>({
  category3Id: '',
  createTime: '',
  description: '',
  id: 0,
  spuName: '',
  spuImageList: [],
  spuPosterList: [],
  spuSaleAttrList: [],
  /* TrademarkID [品牌ID] */
  tmId: ''
})
/* 控制是否开启照片放大的窗口 */
let dialogVisible = ref(false)
let dialogImageUrl = ref('') //控制是否开启照片放大的窗口的照片
/* 未被选中的销售属性的值与ID*/
let saleAttrIdAndValueName = ref('')
/* SPU销售属性的计算属性
这段代码定义了一个名为 unSelectSaleAttr 的计算属性，它使用 Vue.js 的 computed 函数来创建一个响应式的属性。这个计算属性的目的是找出所有销售属性（allSaleAttr.value）中那些没有被选中（即不在 saleAttr.value 数组中的）销售属性。

让我们逐步解析这段代码：

computed(() => { ... })：这是 Vue.js 中定义计算属性的方式。计算属性是基于它们的依赖进行缓存的。只有当相关依赖发生改变时，计算属性才会重新求值。这里，unSelectSaleAttr 依赖于 allSaleAttr.value 和 saleAttr.value。
let unSelectArr = allSaleAttr.value.filter((item) => { ... })：这行代码使用数组的 filter 方法来遍历 allSaleAttr.value 数组。filter 方法会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。这里的测试函数检查每个 item 是否满足特定条件（即该 item 是否不在 saleAttr.value 数组中）。
return saleAttr.value.every((item1) => { return item.name != item1.saleAttrName })：这是 filter 方法中使用的测试函数。它使用 every 方法来检查 saleAttr.value 数组中的每一个元素（item1）。every 方法会测试数组中是不是所有元素都通过了被提供的函数测试。在这个情况下，如果 saleAttr.value 数组中的所有元素的 saleAttrName 属性都不等于当前 item 的 name 属性，那么 every 方法会返回 true，意味着当前 item 没有被选中。
return unSelectArr：最后，计算属性返回了 unSelectArr，即所有未被选中的销售属性的数组。
简而言之，这段代码的功能是：从所有销售属性（allSaleAttr.value）中筛选出那些其 name 属性不在选中销售属性（saleAttr.value 数组中的 saleAttrName 属性）列表中的销售属性，并将这些未被选中的销售属性作为一个数组返回。这种计算属性非常适合在 Vue 组件中用于动态展示未选择的选项，同时保持对数据源变化的响应性。
*/
let unSelectSaleAttr = computed(() => {
  let unSelectArr = allSaleAttr.value.filter((item) => {
    return saleAttr.value.every((item1) => {
      return item.name != item1.saleAttrName
    })
  })
  return unSelectArr
})
const save = () => {
  if (saleAttr.value.length>0) {
    
  } else {
    ElMessage({
      type: 'error',
      message: 'SPu销售属性不能为空'
    })
    return
  }
  upDataAndSaveSpu()
  SpuStore.scene = 0
  
}
const cancal = () => {
  $emit('changUpDataHasSpu',{store:'updata'})
  SpuStore.scene = 0
  
}
/* 获取各种数据的方法 */
const upDataSpuData = async (spu=SpuParams.value) => {
  SpuParams.value = spu
  console.log(SpuParams.value)
  let result = await reqHasTrademarkList()
  let result1 = await reqHasSpuImageList(SpuParams.value?.id)
  let result2 = await reqHasExistingSpuSaleAttrList(SpuParams.value?.id)
  let result3 = await reqHasAllSaleAttrList()
  tradeMarkList.value = result.data
  imgList.value = result1.data.map((item) => {
    return {
      name: item.imgName,
      url: item.imgUrl
    }
  })
  saleAttr.value = result2.data
  allSaleAttr.value = result3.data
}
/* 处理照片墙预览的方法 */
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
/* 图片上传之前的钩子 */
const handlerUpload = (file) => {
  if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
    if (file.size / 1024 / 1024 < 3) {
      return true
    } else {
      ElMessage({
        type: 'error',
        message: '上传文件务必小于3M'
      })
      return false
    }
  } else {
    ElMessage({
      type: 'error',
      message: '上传文件务必PNG|JPG|GIF'
    })
    return false
  }
}
//修改/保存SPU属性
const upDataAndSaveSpu = async () => {
  /* 归纳数据
      1.图片的数据需要重新整理后将其整理成我们上传的数据格式
      2.使用map方法将其数组重新赋值,我们的数据由照片墙必须的属性值转换为上传的格式.并且除了已有的照片,还有新创建的照片,其格式的imgUrl属性是使用接口返回的一个对象.
  */
  SpuParams.value.spuImageList = imgList.value.map((item) => {
    return {
      imgName: item.name,
      imgUrl: item.url || (item.response && item.response.data)
    }
  })
  SpuParams.value.spuSaleAttrList = saleAttr.value
  let result
  SpuParams.value.id?
     result = await reqUpDataSpu(SpuParams.value):
    result = await reqAddSpu(SpuParams.value)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message:  SpuParams.value.id?'更新成功':'添加成功'
    })
    $emit('changUpDataHasSpu',{store:SpuParams.value.id?'updata':'add'})

  } else {
    ElMessage({
      type: 'error',
      message:  SpuParams.value.id?'更新失败':'添加失败'
    })
  }
}
const addsaleAttrValueName = (row: SaleAttr) => {
  ;(row.saleAttrValue = ''), (row.flag = true)
}
const toLook = (row: SaleAttr) => {
  const { baseSaleAttrId, saleAttrValue } = row
  let newSaleAttrValue = {
    baseSaleAttrId,
    saleAttrValueName: saleAttrValue
  }
  if (saleAttrValue.trim() == '') {
    ElMessage({
      type: 'error',
      message: '不能为空'
    })
    return
  }
  let repeat = row.spuSaleAttrValueList.find((i) => {
    return i.saleAttrValueName == saleAttrValue
  })
  if (repeat) {
    ElMessage({
      type: 'error',
      message: '不能有重复值'
    })
    return
  }

  row.spuSaleAttrValueList.push(newSaleAttrValue)
  row.flag = false
}
const delSaleAttr = ($index:number) => {
  saleAttr.value.splice($index,1)
}
/* 删除标签的动作 */
const handleClose = (item, index) => {
  item.splice(index,1)
}
/* 添加SPU销售属性 */
const addSaleAttr = () => {
  let repeat = saleAttr.value.find((i) => {
    return i.saleAttrName == saleAttrIdAndValueName.value
  })
  if (repeat) {
    ElMessage({
      type: 'error',
      message: '不能有重复值'
    })
    return
  }
  saleAttr.value.push({
    saleAttrName: saleAttrIdAndValueName.value,
    spuId: SpuParams.value.id,
    baseSaleAttrId: saleAttr.value.length + 1,
    spuSaleAttrValueList:[]
  })
}
const clearSpuParams = (c3ID) => {
  SpuParams.value = {
  category3Id: c3ID,
  createTime: '',
  description: '',
  id: 0,
  spuName: '',
  spuImageList: [],
  spuPosterList: [],
  spuSaleAttrList: [],
  tmId: ''
}
}
onMounted(async () => {
  let result1 = await reqHasSpuImageList(14235)
  console.log(result1)
})
defineExpose({ upDataSpuData ,clearSpuParams})
</script>

<style scoped></style>
